<!DOCTYPE html>
<html lang="ko">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<title>09css넘침및배치</title>
		
	</head>
	<body>
		<h1>CSS 넘침 및 배치</h1>
		<h2>내용넘침 : overflow</h2>
		<p>요소의 박스내 내용을 제어하는 방식에 대한 것</p>
		<p>visible : 박스 밖 넘쳐나는 내용은 남겨둠</p>
		<p>hidden : 박스 밖 넘쳐나는 내용은 잘라냄</p>
		<p>scroll : 박스 밖 넘쳐나는 내용은 잘라내지만 스크롤 바로 볼 수 있음</p>
		<p>auto : 박스 내 내용이  넘쳐나면 스크롤바로 볼 수 있게 함 </p>
		
		<div style="width: 250px; height: 120px; border: 1px solid navy;
					overflow: hidden;">
			<p>시간은 금이라구, 친구!!</p>
			<p>시간은 금이라구, 친구!!</p>
			<p>시간은 금이라구, 친구!!</p>
			<p>시간은 금이라구, 친구!!</p>
			<p>시간은 금이라구, 친구!!</p>
			<p>시간은 금이라구, 친구!!</p>
			<p>시간은 금이라구, 친구!!</p>
			<p>시간은 금이라구, 친구!!</p>
			<p>시간은 금이라구, 친구!!</p>
			<p>시간은 금이라구, 친구!!</p>
			<p>시간은 금이라구, 친구!!</p>
			<p>시간은 금이라구, 친구!!</p>
			<p>시간은 금이라구, 친구!!</p>
			<p>시간은 금이라구, 친구!!</p>
			<p>시간은 금이라구, 친구!!</p>
		</div>
		
		<div style="width: 250px; height: 120px; border: 1px solid navy;
					overflow: scroll;">
			<p>시간은 금이라구, 친구!!</p>
			<p>시간은 금이라구, 친구!!</p>
			<p>시간은 금이라구, 친구!!</p>
			<p>시간은 금이라구, 친구!!</p>
			<p>시간은 금이라구, 친구!!</p>
			<p>시간은 금이라구, 친구!!</p>
			<p>시간은 금이라구, 친구!!</p>
			<p>시간은 금이라구, 친구!!</p>
			<p>시간은 금이라구, 친구!!</p>
			<p>시간은 금이라구, 친구!!</p>
			<p>시간은 금이라구, 친구!!</p>
			<p>시간은 금이라구, 친구!!</p>
			<p>시간은 금이라구, 친구!!</p>
			<p>시간은 금이라구, 친구!!</p>
			<p>시간은 금이라구, 친구!!</p>
		</div>
		
		<div style="width: 250px; height: 120px; border: 1px solid navy;
					overflow: auto;">
			<p>시간은 금이라구, 친구!!</p>
			<p>시간은 금이라구, 친구!!</p>
			<p>시간은 금이라구, 친구!!</p>
			<p>시간은 금이라구, 친구!!</p>
			<p>시간은 금이라구, 친구!!</p>
			<p>시간은 금이라구, 친구!!</p>
			<p>시간은 금이라구, 친구!!</p>
			<p>시간은 금이라구, 친구!!</p>
			<p>시간은 금이라구, 친구!!</p>
			<p>시간은 금이라구, 친구!!</p>
			<p>시간은 금이라구, 친구!!</p>
			<p>시간은 금이라구, 친구!!</p>
			<p>시간은 금이라구, 친구!!</p>
			<p>시간은 금이라구, 친구!!</p>
			<p>시간은 금이라구, 친구!!</p>
		</div>		
		
		<hr />
		<h2>요소의 수평배치 : float</h2>
		<p>요소를 오른쪽/왼쪽에 배치할 것을 결정</p>
		<p>주로 img태그에 사용하지만 레이아웃 배치에 유용하게 활용할 수 있음</p>
		<p>float속성을 해제하고자 할 때는 clear속성을 사용</p>
		<p>clear : left / right / both</p>
		
		<div>
			<img src="images/suzy/002_1.jpg" />
			<p style="width: 350px; border: 1px solid black; display: inline-block;">
				■ 매너와 배려의 아이콘 ‘유재석’, 올해의 산타걸 ‘수지’
				'여자 마음을 잘 알아서 센스 있는 이벤트나 선물을 준비할 것 같은 남자 연예인'으로는
				'젠틀한 매너남 유재석'이 여자 500명 중 16.6%(83명)의 선택을 받아 1위를 차지했다.
				이어서 '여심 녹이는 환한 웃음이 매력적인 공유'가 16.4%(82명)로 2위를,
				'부드러운 서울 남자 유연석'이 14.4%(72명)로 3위를 차지했다.
				'산타 복장이 가장 잘 어울리는 여자 연예인'으로는 남자 500명 중 31.4%(157명)의 선택을 받은
				'풋풋한 첫사랑의 이미지 수지'가 1위를 차지했다.			
			</p>
		</div>

		<div>
			<img src="images/suzy/002_1.jpg" style="float: left;"/>
			<p style="width: 350px; border: 1px solid black;">
				■ 매너와 배려의 아이콘 ‘유재석’, 올해의 산타걸 ‘수지’
				'여자 마음을 잘 알아서 센스 있는 이벤트나 선물을 준비할 것 같은 남자 연예인'으로는
				'젠틀한 매너남 유재석'이 여자 500명 중 16.6%(83명)의 선택을 받아 1위를 차지했다.
				이어서 '여심 녹이는 환한 웃음이 매력적인 공유'가 16.4%(82명)로 2위를,
				'부드러운 서울 남자 유연석'이 14.4%(72명)로 3위를 차지했다.
				'산타 복장이 가장 잘 어울리는 여자 연예인'으로는 남자 500명 중 31.4%(157명)의 선택을 받은
				'풋풋한 첫사랑의 이미지 수지'가 1위를 차지했다.
			</p>
		</div>
		
		<div style="clear: both;">
			<img src="images/suzy/002_1.jpg" style="float: right;"/>
			<span style="float: right; width: 350px; border: 1px solid black;">
				■ 매너와 배려의 아이콘 ‘유재석’, 올해의 산타걸 ‘수지’
				'여자 마음을 잘 알아서 센스 있는 이벤트나 선물을 준비할 것 같은 남자 연예인'으로는
				'젠틀한 매너남 유재석'이 여자 500명 중 16.6%(83명)의 선택을 받아 1위를 차지했다.
				이어서 '여심 녹이는 환한 웃음이 매력적인 공유'가 16.4%(82명)로 2위를,
				'부드러운 서울 남자 유연석'이 14.4%(72명)로 3위를 차지했다.
				'산타 복장이 가장 잘 어울리는 여자 연예인'으로는 남자 500명 중 31.4%(157명)의 선택을 받은
				'풋풋한 첫사랑의 이미지 수지'가 1위를 차지했다.
			</span>
		</div>
		
	</body>
</html>
